<template>
    <!-- 顶部搜索栏 -->
    <div style="margin-bottom: 10px;">
        <el-input v-model="salesSearchInput" placeholder="按销售记录编号搜索" :prefix-icon="Search" style="width: 240px;" />
    </div>

    <!-- 销售记录表格 -->
    <el-table :data="displaySalesRecords" highlight-current-row style="width: 100%; margin-top: 15px;">
        <el-table-column fixed prop="salesID" label="账单编号" align="center" />
        <el-table-column prop="salesDate" label="账单日期" align="center" />
        <el-table-column prop="salesPrice" label="账单总价" align="center" />
        <el-table-column prop="salesState" label="账单状态" align="center" />
        <el-table-column fixed="right" label="操作" min-width="120" align="center">
            <template #default="row">
                <el-button size="small" type="primary" @click="viewOrderDetail(row.row)">
                    <el-icon><Tickets /></el-icon> 详情
                </el-button>
                <el-button size="small" type="primary" @click="editOrder(row.row)">
                    <el-icon><Edit /></el-icon> 修改
                </el-button>
                <el-button size="small" type="danger" @click="confirmDelete(row.row)" :disabled="row.row.productCount > 0">
                    <el-icon><Delete /></el-icon> 删除
                </el-button>
            </template>
        </el-table-column>
        <template #empty>
            <el-empty description="暂无销售记录数据" />
        </template>
    </el-table>

    <!-- 订单详情对话框 -->
    <el-dialog v-model="detailDialog" title="订单商品详情" width="800px">
        <el-table :data="orderItems" style="width: 100%;">
            <el-table-column prop="merchandiseName" label="商品名称" align="center" />
            <el-table-column prop="merchandisePrice" label="商品单价" align="center" />
            <el-table-column prop="merchandiseQuantity" label="购买数量" align="center" />
        </el-table>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="deleteDialog" title="确认删除" width="400px">
        <template #content>
            <p>确定要删除该订单吗？此操作不可撤销。</p>
            <p v-if="selectedOrder.salesID">订单编号：{{ selectedOrder.salesID }}</p>
        </template>
        <template #footer>
            <el-button @click="deleteDialog = false">取消</el-button>
            <el-button type="danger" @click="handleDelete">确认删除</el-button>
        </template>
    </el-dialog>

    <!-- 修改对话框（保持原有逻辑） -->
</template>

<script lang='ts' setup>
import axios from 'axios';
import { ref, reactive, onMounted, computed } from 'vue';
import { ElNotification } from 'element-plus';
import { Search, Tickets, Edit, Delete } from '@element-plus/icons-vue';

// 状态管理
const detailDialog = ref(false);
const deleteDialog = ref(false);
const orderItems = ref([]);
const allSalesRecords = ref([]); // 存储所有销售记录
const salesSearchInput = ref('');
const selectedOrder = ref({ salesID: null }); // 存储当前选中的订单

// 初始化数据
onMounted(async () => {
    await loadSalesRecords();
});

// 加载所有销售记录
async function loadSalesRecords() {
    try {
        const response = await axios.get('/api/sales');
        allSalesRecords.value = response.data.data || [];
    } catch (error) {
        ElNotification.error({ message: '获取销售记录失败' });
    }
}

// 计算属性：根据搜索内容过滤销售记录
const displaySalesRecords = computed(() => {
    if (!salesSearchInput.value.trim()) {
        return allSalesRecords.value;
    }
    
    const searchId = salesSearchInput.value.trim();
    return allSalesRecords.value.filter(record => 
        record.salesID.toString().includes(searchId)
    );
});

// 查看订单详情
async function viewOrderDetail(salesRecord: any) {
    try {
        const response = await axios.get(`/api/sales/${salesRecord.salesID}`);
        orderItems.value = response.data.data || [];
        detailDialog.value = true;
    } catch (error) {
        ElNotification.error({ message: '获取订单详情失败' });
    }
}

// 确认删除订单
function confirmDelete(salesRecord: any) {
    selectedOrder.value = salesRecord;
    deleteDialog.value = true;
}

// 处理删除操作
async function handleDelete() {
    try {
        // 调用删除API，传递订单ID
        await axios.delete(`/api/sales/${selectedOrder.value.salesID}`);
        
        // 显示成功消息
        ElNotification.success({ message: '订单删除成功' });
        
        // 关闭对话框
        deleteDialog.value = false;
        
        // 从本地数据中移除已删除的记录
        allSalesRecords.value = allSalesRecords.value.filter(
            record => record.salesID !== selectedOrder.value.salesID
        );
    } catch (error) {
        ElNotification.error({ message: '订单删除失败，请稍后重试' });
    }
}

// 其他方法（修改，保持原有逻辑）
function editOrder(salesRecord: any) {
    // 原有逻辑保持不变
}
</script>

<style scoped>
.el-table-column {
    text-align: center;
}
</style>    